{template 'common/header'}

<ul class="nav nav-tabs">
	<li class="active"><a href="{php echo $this->createWebUrl('system', array('op' => 'system_1'))}">奖品设置</a></li>
</ul>

<style type='text/css'>
	.tab-pane {padding:20px 0 20px 0;}
	.input-group-addon
	{
		background-color: white;
	}
	.form-box
	{
		margin-top: 7px;
	}
</style>
<div class="main">
	<form action="" method="post" class="form-horizontal form" enctype="multipart/form-data" id="form1">
		<div class="panel panel-info">
			<div class="panel-heading">
				奖品列表
			</div>
			<div class="panel-body">

				<div class="table-responsive panel-body">
					<table class="table table-hover table-responsive" style="min-width: 300px;">
						<thead class="navbar-inner">
						<tr>
							<th style="width:8%">排序</th>
							<th style="width:30%">奖品图</th>
							<th style="width:10%;">奖品名</th>
							<th style="width:10%">背景色</th>
							<th style="width:10%">奖品数</th>
							<th style="width:10%">中奖率(%)</th>
							<th style="width:5%">空奖</th>
							<th style="width:10%;">操作</th>
						</tr>
						</thead>
						<tbody id="prize-list">
						{loop $prizes $key $item}
						<tr id="prize-one-{$i}">
							<td>
								<input type="text" name="prize_id[]" class="form-control" value="{$item['prize_id']}" style="display: none"/>
								<input type="number" name="prize_order[]" class="form-control" value="{$item['prize_order']}" />
							</td>
							<td>
								{php echo tpl_form_field_image('prize_pic[]', $item['prize_pic'])}
							</td>
							<td>
								<input type="text" name="prize_name[]" class="form-control" value="{$item['prize_name']}" />
							</td>
							<td>
								<input type="text" name="prize_backcolor[]" class="form-control" value="{$item['prize_backcolor']}" />
							</td>
							<td>
								<input type="number" name="prize_quantity[]" class="form-control" value="{$item['prize_quantity']}" />
							</td>
							<td>
								<input type="number"  name="prize_probability[]" class="form-control" value="{$item['prize_probability']}" />
							</td>
							<td>
								<input type="text" value="{$item['prize_blank']}" name="prize_blank[]" style="display: none" id="blank_{$i}">
								<input onchange="blank({$i}, this)"  type="checkbox"   class="form-box"  {if $item['prize_blank'] == 2}checked{/if} />
							</td>
							<td>
								<a onclick="if(!confirm('删除后将不可恢复,确定删除吗?')) return false;" href="javascript:deletePrize('{$i}', '{$item['prize_id']}')" data-id = "{$item['prize_id']}" class="btn btn-danger">删除</a>
							</td>
						</tr>
						{php $i++;}
						{/loop}

						</tbody>
					</table>

					<a href="javascript:addPrize()" class="btn btn-default">添加奖品+</a>
				</div>

				<div class="form-group" style="margin-top: 20px; padding-left: 15px">
					<div class="col-xs-12 col-sm-9 col-md-10 col-lg-10">
						<input name="submit" type="submit" value="提交" class="btn btn-primary" style="width:100px;"/>
						<input type="hidden" name="token" value="{$_W['token']}" />
					</div>
				</div>
			</div>
		</div>

	</form>
</div>
<script>
	var i = "{$i}";

	function blank(id, that) {


        var state = $(that).prop("checked");
       	if (state)
		{
		    $('#blank_' + id).val('2');

		} else
		{
            $('#blank_' + id).val('1');
		}
    }

	function addPrize() {

		var str = '';

		str += '<tr id="prize-one-' + i + '">';
		str +=	'<td><input type="text" name="prize_id[]" class="form-control" value="" style="display: none"/><input type="number" name="prize_order[]" class="form-control" value="" /> </td>';

		str += '<td>';
		str += '<div class="input-group ">'+
			'<input type="text" name="prize_pic[]" value="" class="form-control" autocomplete="off">' +
			'<span class="input-group-btn">'+
			' <button class="btn btn-default" type="button" onclick="showImageDialog(this);">选择图片</button>'+
			'</span>'+
			'</div>'+
			'<div class="input-group " style="margin-top:.5em;">'+
			'<img src="./resource/images/nopic.jpg" onerror="this.src=\'./resource/images/nopic.jpg\'; this.title=\'图片未找到.\'" class="img-responsive img-thumbnail"  width="150" />'+
			'<em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" onclick="deleteImage(this)">×</em>'+
			'</div>';
		str += '</td>';
		str += '<td><input type="text" name="prize_name[]" class="form-control" value="" /></td>';
		str += '<td><input type="text" name="prize_backcolor[]" class="form-control" value="" /></td>';
		str += '<td><input type="number" name="prize_quantity[]" class="form-control" value="" /></td>';
		str += '<td><input type="number" name="prize_probability[]" class="form-control" value="" /></td>';
        str += '<td>';
        str += '<input type="text" name="prize_blank[]" style="display: none" id="blank_' + i + '">';
        str += '<input type="checkbox"  onchange="blank(i, this)"  class="form-box" value="2"  /></td>';
		str += '<td><a onclick="if(!confirm(\'删除后将不可恢复,确定删除吗?\')) return false;" href="javascript:deletePrize('+ i +', 0)"  class="btn btn-danger">删除</a></td>';
		str +=	'</tr>';

		$('#prize-list').append(str);
		i++;
	}

	function deletePrize(id, prize_id) {

		if (prize_id != 0)
		{
			$.ajax({
				url:"{php echo $this->createWebUrl('prize', array('op' => 'delete'))}",
				type:"post",
				data:{prize_id:prize_id},
				success:function (res) {

				}
			})
		}

		$('#prize-one-' + id).remove();
	}

</script>
<script type="text/javascript">
	function showImageDialog(elm, opts, options) {
		require(["util"], function(util){
			var btn = $(elm);
			var ipt = btn.parent().prev();
			var val = ipt.val();
			var img = ipt.parent().next().children();
			options = {'global':false,'class_extra':'','direct':true,'multiple':false,'fileSizeLimit':5120000};
			util.image(val, function(url){
				if(url.url){
					if(img.length > 0){
						img.get(0).src = url.url;
					}
					ipt.val(url.attachment);
					ipt.attr("filename",url.filename);
					ipt.attr("url",url.url);
				}
				if(url.media_id){
					if(img.length > 0){
						img.get(0).src = "";
					}
					ipt.val(url.media_id);
				}
			}, options);
		});
	}
	function deleteImage(elm){
		$(elm).prev().attr("src", "./resource/images/nopic.jpg");
		$(elm).parent().prev().find("input").val("");
	}
</script>
{template 'common/footer'}
